<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/taglibs.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>卓新会计培训学校</title>
		<%@ include file="/WEB-INF/content/jsp/common/jspcommon.jsp"%>
	</head>
	<body>
		<div class="divf">
			<!-- 顶部文件 -->
			<%@ include file="/WEB-INF/content/jsp/common/top.jsp"%>

			<!-- 网站导航 -->
			<%@ include file="/WEB-INF/content/jsp/common/navigation.jsp"%>

			<!-- 分享 -->
			<%@ include file="/WEB-INF/content/jsp/common/share.jsp"%>

			<div class="center">
				<!-- banner start -->
				<div class="banner">
					<script type="text/javascript">
					var timeout = 500;
					var closetimer = 0;
					var ddmenuitem = 0;
					
					function jsddm_open() {	
						jsddm_canceltimer();
						jsddm_close();
						ddmenuitem = $(this).find('ul').eq(0);
						ddmenuitem.show();
					}
					
					function jsddm_close() {	
						if(ddmenuitem)ddmenuitem.hide();
					}
					
					function jsddm_timer(){
						closetimer = window.setTimeout(jsddm_close, timeout);
					}
					
					function jsddm_canceltimer() {
						if(closetimer){
							window.clearTimeout(closetimer);
							closetimer = null;
						}
					}
					
					$(document).ready(function(){	
					
					$('#jsddm > li').bind('mouseover', jsddm_open);
						$('#jsddm > li').bind('mouseout',  jsddm_timer);});
					
					document.onclick = jsddm_close;
					
					$(function() {
						var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）
						var len = $("#focus ul li").length; //获取焦点图个数
						var index = 0;
						var picTimer;
						
						//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
						var btn = "<div class='btnBg'></div><div class='btn'>";
						for(var i=0; i < len; i++) {
							btn += "<span></span>";
						}
						btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
						$("#focus").append(btn);
						$("#focus .btnBg").css("opacity",0.5);
					
						//为小按钮添加鼠标滑入事件，以显示相应的内容
						$("#focus .btn span").css("opacity",0.4).mouseenter(function() {
							index = $("#focus .btn span").index(this);
							showPics(index);
						}).eq(0).trigger("mouseenter");
					
						//上一页、下一页按钮透明度处理
						$("#focus .preNext").css("opacity",0.2).hover(function() {
							$(this).stop(true,false).animate({"opacity":"0.5"},300);
						},function() {
							$(this).stop(true,false).animate({"opacity":"0.2"},300);
						});
					
						//上一页按钮
						$("#focus .pre").click(function() {
							index -= 1;
							if(index == -1) {index = len - 1;}
							showPics(index);
						});
					
						//下一页按钮
						$("#focus .next").click(function() {
							index += 1;
							if(index == len) {index = 0;}
							showPics(index);
						});
					
						//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
						$("#focus ul").css("width",sWidth * (len));
						
						//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
						$("#focus").hover(function() {
							clearInterval(picTimer);
						},function() {
							picTimer = setInterval(function() {
								showPics(index);
								index++;
								if(index == len) {index = 0;}
							},4000); //此4000代表自动播放的间隔，单位：毫秒
						}).trigger("mouseleave");
						
						//显示图片函数，根据接收的index值显示相应的内容
						function showPics(index) { //普通切换
							var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
							$("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
							//$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
							$("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果
						}
					});
					
					</script>

					<div id="focus">
						<ul>
							<li><a href="#" target="_blank"><img src="<c:url value='/jsp/images/01.png'/>" alt="#" /></a></li>
							<li><a href="#" target="_blank"><img src="<c:url value='/jsp/images/02.png'/>" alt="#" /></a></li>
							<li><a href="#" target="_blank"><img src="<c:url value='/jsp/images/03.png'/>" alt="#" /></a></li>
							<li><a href="#" target="_blank"><img src="<c:url value='/jsp/images/04.png'/>" alt="#" /></a></li>
							<li><a href="#" target="_blank"><img src="<c:url value='/jsp/images/05.png'/>" alt="#" /></a></li>
						</ul>
					</div>
				</div>
				<!-- banner end   -->

				<!-- 新闻分类  -->
				<%@ include file="/WEB-INF/content/jsp/common/left.jsp"%>

				<div class="c_right">
					<div class="cr_tit">
						<b class="cr_tit_l">在线留言</b>
					</div>
					<div class="cr_cent1 about_text">
						<h1 class="mR_tit5">${vo.title }</h1>
						<p class="mR_tit6">
							<span>留言人：${vo.name }&nbsp;&nbsp;发布时间：${vo.ttime }</span>
						</p>
						<div class="mRd_cen1">留言内容：<br />${vo.content }</div>
						<br />
						<div class="mRd_cen1">回复内容：<br />${vo.remarkContent }</div>
					</div>
				</div>

				<!-- 底部文件 -->
				<%@ include file="/WEB-INF/content/jsp/common/fooder.jsp"%>

				<!-- 在线资讯 -->
				<%@ include file="/WEB-INF/content/jsp/common/online.jsp"%>
			</div>
		</div>
	</body>
</html>